<template>
    <div class="header">
        <div class="left">
             <h3>叩丁狼电商运营平台</h3>
             <el-icon :size="20" color="#fff" @click="userStore.isShow"><Menu /></el-icon>
        </div>
        <div class="right">
            <el-dropdown @command="hdCommand">
    <span class="el-dropdown-link">
    {{ userStore.username }}
      <el-icon class="el-icon--right">
        <arrow-down />
      </el-icon>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item command="index">首页</el-dropdown-item>
        <el-dropdown-item command="logout">退出</el-dropdown-item>
       
      </el-dropdown-menu>
    </template>
  </el-dropdown>
        </div>
       
    </div>
</template>

<script setup lang="ts">
import { Menu,ArrowDown  } from "@element-plus/icons-vue";
import { useUserStore} from "@/store/user"
import {useRouter} from "vue-router"
import { ElMessage } from "element-plus";
import { logout } from "@/common";
import { userLogoutApi } from "@/http/api";
const userStore = useUserStore();
const router = useRouter();
const hdCommand = (command:string)=>{
if(command==='index'){

  router.push("/index");

}else if(command==='logout'){
logout(
()=>{
  userLogoutApi();
},
()=>{
ElMessage.success("退出成功!")
}
);
}
};
</script>

<style scoped lang="less">
.header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
.left{
    h3{
        display: inline-block;
    padding-right:20px;
    line-height: 70px;
    font-weight: 400;
    font-size: 24px;
    color: #fff;
    }
    :deep(.el-icon){
        display: inline-block;
        height: 70px;
        line-height: 70px;
    }
}
.right{
    :deep(.el-dropdown){
      color: #fff;
      height: 70px;
        line-height: 70px;
    }
}
}
</style>